<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>平台头条添加--${site.name}</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta name="description" content="${site.description}"/>
    <meta name="keywords" content="${site.keywords}"/>
    <meta name="author" content="${site.author}"/>
    <link rel="icon" href="${site.logo}">
    <link rel="stylesheet" href="${base}/static/layui/css/layui.css" media="all" />
    <style type="text/css">
        .layui-form-item .layui-inline{ width:33.333%; float:left; margin-right:0; }
        @media(max-width:1240px){
            .layui-form-item .layui-inline{ width:100%; float:none; }
        }
        .layui-form-item .role-box {
            position: relative;
        }
        .layui-form-item .role-box .jq-role-inline {
            height: 100%;
            overflow: auto;
        }

    </style>
</head>
<body class="childrenBody">
<!-- 递归  宏定义 -->
<#macro bpTree children>
    <#if children?? && children?size gt 0>
        <#list children as child>
            <#if child.children?? && child.children?size gt 0>
                <li style="margin-top: 5px;margin-left: 1.5em"><input type="checkbox" title="${child.name}" value="${child.id}" data-parentIds = "${child.parentIds}"  lay-filter="headlinesClassify" />
                    <ul>
                        <@bpTree children=child.children />
                    </ul>
                </li>
            <#else>
                <li style="margin-top: 5px;margin-left: 1.5em"><input type="checkbox" title="${child.name}" value="${child.id}" data-parentIds = "${child.parentIds}"  lay-filter="headlinesClassify" /></li>
            </#if>
        </#list>
    </#if>
</#macro>
<form class="layui-form" style="width:80%;">
    <div class="layui-form-item" style="position: relative;z-index: 999">
        <label class="layui-form-label">显示类型</label>
        <div class="layui-input-block">
            <select id="showType" lay-filter="showType" onchange="typeChange()">
                <option value="1" selected>PC端</option>
                <option value="2" >手机端</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">标题</label>
        <div class="layui-input-block">

            <input  type="text"  class="layui-input" name="title"  placeholder="请输入标题"
                    onkeyup="checkLen2(this)" maxlength="50">
        </div>
    </div>
    <div class="layui-form-item showPc" style="position: relative;z-index: 998">
        <label class="layui-form-label">PC内容</label>
        <div class="layui-input-block">

            <div id="content"></div>
        </div>
    </div>
    <div class="layui-form-item showPhone"  style="display: none;position: relative;z-index: 998">
        <label class="layui-form-label">手机内容</label>
        <div class="layui-input-block">

            <div id="contentMobile"></div>
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">图片</label>
        <div class="layui-input-block">

            <input type="hidden" class="layui-input" name="pics" id="pics" >
            <div class="layui-upload">
                <button type="button" class="layui-btn" id="test_pics">上传图片</button>
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="demo_pics">
                    <p id="demoText_picPath"></p>
                </div>
            </div>
        </div>
    </div>


    <div class="layui-form-item">
            <label class="layui-form-label">标识</label>
            <div class="layui-input-block" style="width: 80%">
                <#if classifyList?? && classifyList?size gt 0>
                    <#list classifyList as classify>
                        <div class="layui-inline">
                            <fieldset class="layui-elem-field">
                                <legend><input type="checkbox"  value="${classify.id}" data-parentIds = "${classify.parentIds}"   title="${classify.name}" lay-filter="headlinesClassify"/></legend>
                                <div class="layui-field-box">
                                    <ul style="padding: 0 15px">
                                        <@bpTree children=classify.children />
                                    </ul>
                                </div>
                            </fieldset>
                        </div>
                    </#list>
                </#if>
            </div>
        </div>

    <#--   <div class="layui-form-item">
           <label class="layui-form-label">标识</label>
           <div class="layui-input-block">

               <select name="flag" >
                   <option value="" selected="">请选择标识</option>
                   <@my type="electricity_headlines_flag">
                   <#list result as r>
                   <option value="${r.value}" >${r.label}</option>
                   </#list>
                   </@my>
               </select>
           </div>
       </div>-->
    <div class="layui-form-item">
        <label class="layui-form-label">是否最热</label>
        <div class="layui-input-block">

            <#assign electricity_headlines_is_not_hot_yes="">
            <#assign electricity_headlines_is_not_hot_yes_value="">
            <#assign electricity_headlines_is_not_hot_no="">
            <@my type="electricity_headlines_is_not_hot">
                <#list result as r>
                    <#if (r_index == 0)>
                        <#assign electricity_headlines_is_not_hot_yes="是">
                        <#assign electricity_headlines_is_not_hot_yes_value="${r.value}">
                    </#if>
                    <#if (r_index == 1)>
                        <#assign electricity_headlines_is_not_hot_no="否">
                    </#if>
                </#list>
            </@my>
            <input type="checkbox" name="isNotHot"  lay-skin="switch" value="${electricity_headlines_is_not_hot_yes_value}" lay-text="${electricity_headlines_is_not_hot_yes}|${electricity_headlines_is_not_hot_no}  " checked>

        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">是否最新</label>
        <div class="layui-input-block">

            <#assign electricity_headlines_is_not_new_yes="">
            <#assign electricity_headlines_is_not_new_yes_value="">
            <#assign electricity_headlines_is_not_new_no="">
            <@my type="electricity_headlines_is_not_new">
                <#list result as r>
                    <#if (r_index == 0)>
                        <#assign electricity_headlines_is_not_new_yes="是">
                        <#assign electricity_headlines_is_not_new_yes_value="${r.value}">
                    </#if>
                    <#if (r_index == 1)>
                        <#assign electricity_headlines_is_not_new_no="否">
                    </#if>
                </#list>
            </@my>
            <input type="checkbox" name="isNotNew"  lay-skin="switch" value="${electricity_headlines_is_not_new_yes_value}" lay-text="${electricity_headlines_is_not_new_yes}|${electricity_headlines_is_not_new_no}  " checked>

        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">是否推荐</label>
        <div class="layui-input-block">

            <#assign electricity_headlines_recommendation_yes="">
            <#assign electricity_headlines_recommendation_yes_value="">
            <#assign electricity_headlines_recommendation_no="">
            <@my type="electricity_headlines_recommendation">
                <#list result as r>
                    <#if (r_index == 0)>
                        <#assign electricity_headlines_recommendation_yes="是">
                        <#assign electricity_headlines_recommendation_yes_value="${r.value}">
                    </#if>
                    <#if (r_index == 1)>
                        <#assign electricity_headlines_recommendation_no="否">
                    </#if>
                </#list>
            </@my>
            <input type="checkbox" name="recommendation"  lay-skin="switch" id="recommendation" lay-filter="recommendation" value="${electricity_headlines_recommendation_yes_value}" lay-text="${electricity_headlines_recommendation_yes}|${electricity_headlines_recommendation_no} " checked>

        </div>
    </div>
    <div class="layui-form-item" id="subtitle" style="display: none">
        <label class="layui-form-label">副标题</label>
        <div class="layui-input-block">

            <textarea name="subtitle"  placeholder="请输入副标题" class="layui-textarea"
                      onkeyup="checkLen2(this)" maxlength="50"></textarea>
        </div>
    </div>
   <div class="layui-form-item">
        <label class="layui-form-label">访问量</label>
        <div class="layui-input-block">

            <input  type="text" value="${electricityHeadlines.showTime}" class="layui-input" name="showTime" id="showTime" placeholder="请输入访问量" disabled>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter="addElectricityHeadlines">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<script type="text/javascript" src="${base}/static/layui/layui.js"></script>
<script type="text/javascript" src="${base}/static/js/wangEditor.min.js"></script>
<script type="text/javascript" src="${base}/static/js/libs/jquery-2.1.1.min.js"></script>

<script>

    Array.prototype.contains = function ( needle ) {
        for (i in this) {
            if (this[i] == needle) return true;
        }
        return false;
    };

    layui.use(['form','jquery','layer','upload'],function(){
        var form      = layui.form,
            $     = layui.jquery,
            E = window.wangEditor,
            layer = layui.layer;
        var upload    = layui.upload; //得到 upload 对象
        var showTime = $("#showTime").val();
        if(showTime==""){
            $("#showTime").val("0")
        }

        form.on('select(showType)', function(data){
            var value = data.value;
            if(value==1){
                $(".showPc").show();
                $(".showPhone").hide();
            }else {
                $(".showPc").hide();
                $(".showPhone").show();
            }
        });

        form.on('checkbox(headlinesClassify)',function(data){
            var v = data.elem.getAttribute("data-parentIds"),
                myarr=v.split(",");
            var child = $(data.elem).parents('form').find('input[type="checkbox"]');
            if(data.elem.checked){//勾选的时候的动作,父栏目层级全部勾选
                child.each(function(index, item){
                    if(myarr.contains(item.value)){
                        item.checked = data.elem.checked;
                        var r = item.getAttribute("data-parentIds")
                        if(r !=null)
                            noarr = r.split(",");
                        if(noarr.contains(data.value)){
                            item.checked = data.elem.checked;

                            var recommendation = $('#recommendation').siblings("div.layui-form-switch").find('em')[0].innerHTML
                            console.log(recommendation);
                            if(recommendation=="on"||recommendation=="是"&&noarr.includes("20")){
                                $("#subtitle").show();
                            }else{
                                $("#subtitle").hide();
                            }
                        }
                    }
                });
            }else{ //取消选择的时候，子栏目层级全部取消选择
                child.each(function(index, item){
                    //获取每一个checkbox的 父栏目ID组
                    var r = item.getAttribute("data-parentIds")
                    if(r !=null)
                        noarr = r.split(",");
                    if(noarr.contains(data.value)){
                        item.checked = data.elem.checked;
                        var recommendation  = $("#recommendation").val();
                        console.log(recommendation);
                        if(recommendation=="on"&&noarr.includes("20")){
                            $("#subtitle").show();
                        }else{
                            $("#subtitle").hide();
                        }
                    }
                });
            }
            form.render('checkbox');
        });

        form.on('switch(recommendation)', function(data){
            console.log(this.checked);

            var classifies = [];
            var c = $('form').find('input[type="checkbox"]');
            c.each(function(index, item){
                var m = {};
                if(item.checked){
                    m.id = parseInt(item.value);
                    if(item.value!=0&&item.value!="on"){
                        classifies.push(m);
                    }
                }
            });
            var sub_title = classifies.map(function(v){return v.id;});
            if(sub_title.includes(20)&&this.checked){
                $("#subtitle").show();
            }else {
                $("#subtitle").hide();
            }
        })

        var content_editor = new E('#content');
        //图片上传
        content_editor.customConfig.uploadImgServer = '${base}/file/uploadWang';
        content_editor.customConfig.uploadFileName = 'test';
        // 自定义处理粘贴的文本内容(这里处理图片抓取)
        content_editor.customConfig.pasteTextHandle = function (content) {
            if(undefined == content){
                return content;
            }
            if(content.indexOf("src=")<=0){
                return content;
            }
            var loadContent = layer.load(2, {
                shade: [0.3, '#333']
            });
            $.ajax({
                url: "${base}/file/doContent/",
                type: "POST",
                async: false,
                data:{"content":content},
                dataType: "json",
                success:function(res){
                    layer.close(loadContent);
                    content = res.data;
                }
            });
            return content;
        };
        // 关闭粘贴样式的过滤
        content_editor.customConfig.pasteFilterStyle = false;
        content_editor.customConfig.customAlert = function (info) {
            // info 是需要提示的内容
            layer.msg(info);
        };
        content_editor.create();



        var contentMobile_editor = new E('#contentMobile');
        //图片上传
        contentMobile_editor.customConfig.uploadImgServer = '${base}/file/uploadWang';
        contentMobile_editor.customConfig.uploadFileName = 'test';
        // 自定义处理粘贴的文本内容(这里处理图片抓取)
        contentMobile_editor.customConfig.pasteTextHandle = function (content) {
            if(undefined == content){
                return content;
            }
            if(content.indexOf("src=")<=0){
                return content;
            }
            var loadContent = layer.load(2, {
                shade: [0.3, '#333']
            });
            $.ajax({
                url: "${base}/file/doContent/",
                type: "POST",
                async: false,
                data:{"content":content},
                dataType: "json",
                success:function(res){
                    layer.close(loadContent);
                    content = res.data;
                }
            });
            return content;
        };
        // 关闭粘贴样式的过滤
        contentMobile_editor.customConfig.pasteFilterStyle = false;
        contentMobile_editor.customConfig.customAlert = function (info) {
            // info 是需要提示的内容
            layer.msg(info);
        };
        contentMobile_editor.create();




        //普通图片上传
        var upload_picPath = upload.render({
            elem: '#test_pics',
            url: '${base}/file/uploadOss/',
            field:'test',
            before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo_pics').attr('src', result); //图片链接（base64）
                });
            },
            done: function(res){
                //如果上传失败
                if(res.success == false){
                    return layer.msg('上传失败');
                }
                $("#pics").val(res.data);
            },
            error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText_picPath');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    upload_picPath.upload();
                });
            }
        });


        form.on("submit(addElectricityHeadlines)",function(data){
            var c = content_editor.txt.html();
            c = c.replace(/\"/g, "'");
            data.field.content = c;
            <#assign electricity_headlines_is_not_hot_yes="">
            <#assign electricity_headlines_is_not_hot_yes_value="">
            <#assign electricity_headlines_is_not_hot_no="">
            <#assign electricity_headlines_is_not_hot_no_value="">
            <@my type="electricity_headlines_is_not_hot">
            <#list result as r>
            <#if (r_index == 0)>
            <#assign electricity_headlines_is_not_hot_yes="${r.label}">
            <#assign electricity_headlines_is_not_hot_yes_value="${r.value}">
            </#if>
            <#if (r_index == 1)>
            <#assign electricity_headlines_is_not_hot_no="${r.label}">
            <#assign electricity_headlines_is_not_hot_no_value="${r.value}">
            </#if>
            </#list>
            </@my>
            if(undefined === data.field.isNotHot || '${electricity_headlines_is_not_hot_no_value}' === data.field.isNotHot || null === data.field.isNotHot){
                data.field.isNotHot = ${electricity_headlines_is_not_hot_no_value};
            }else{
                data.field.isNotHot = ${electricity_headlines_is_not_hot_yes_value};
            }

            <#assign electricity_headlines_is_not_new_yes="">
            <#assign electricity_headlines_is_not_new_yes_value="">
            <#assign electricity_headlines_is_not_new_no="">
            <#assign electricity_headlines_is_not_new_no_value="">
            <@my type="electricity_headlines_is_not_new">
            <#list result as r>
            <#if (r_index == 0)>
            <#assign electricity_headlines_is_not_new_yes="${r.label}">
            <#assign electricity_headlines_is_not_new_yes_value="${r.value}">
            </#if>
            <#if (r_index == 1)>
            <#assign electricity_headlines_is_not_new_no="${r.label}">
            <#assign electricity_headlines_is_not_new_no_value="${r.value}">
            </#if>
            </#list>
            </@my>
            if(undefined === data.field.isNotNew || '${electricity_headlines_is_not_new_no_value}' === data.field.isNotNew || null === data.field.isNotNew){
                data.field.isNotNew = ${electricity_headlines_is_not_new_no_value};
            }else{
                data.field.isNotNew = ${electricity_headlines_is_not_new_yes_value};
            }

            <#assign electricity_headlines_recommendation_yes="">
            <#assign electricity_headlines_recommendation_yes_value="">
            <#assign electricity_headlines_recommendation_no="">
            <#assign electricity_headlines_recommendation_no_value="">
            <@my type="electricity_headlines_recommendation">
            <#list result as r>
            <#if (r_index == 0)>
            <#assign electricity_headlines_recommendation_yes="${r.label}">
            <#assign electricity_headlines_recommendation_yes_value="${r.value}">
            </#if>
            <#if (r_index == 1)>
            <#assign electricity_headlines_recommendation_no="${r.label}">
            <#assign electricity_headlines_recommendation_no_value="${r.value}">
            </#if>
            </#list>
            </@my>
            if(undefined === data.field.recommendation || '${electricity_headlines_recommendation_no_value}' === data.field.recommendation || null === data.field.recommendation){
                data.field.recommendation = 1;
            }else{
                data.field.recommendation = 0;
            }

            var c = contentMobile_editor.txt.html();
            c = c.replace(/\"/g, "'");
            data.field.contentMobile = c;

             var classifies = [];
            var c = $('form').find('input[type="checkbox"]');
             c.each(function(index, item){
                 var m = {};
                 if(item.checked){
                     m.id = parseInt(item.value);
                     if(item.value!=0){
                         classifies.push(m);
                     }

                 }
             });
             data.field.classifySet = classifies;
             var loadIndex = layer.load(2, {
                 shade: [0.3, '#333']
             });
            $.ajax({
                type:"POST",
                url:"${base}/admin/electricityHeadlines/add",
                dataType:"json",
                contentType:"application/json",
                data:JSON.stringify(data.field),
                success:function(res){
                    layer.close(loadIndex);
                    if(res.success){
                        parent.layer.msg("平台头条添加成功！",{time:1000},function(){
                            //刷新父页面
                            parent.location.reload();
                        });
                    }else{
                        layer.msg(res.message);
                    }
                }
            });
            return false;
        });

    });
</script>
</body>
</html>
